<!-- 
  v-on 经常用

  1. v-on:click 
  2. @click 语法糖
 -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>03-计数器</title>
</head>

<body>
  <!-- {{...}} 专业术语叫 Mustache-->
  <div id="app">
    <h3>当前计数: {{counter}}</h3>

    <!-- v-on:click='counter++; 单行代码操作，不可多行 -->
    <!-- <button v-on:click='counter++;'>+</button>
    <button v-on:click='counter--'>-</button> -->

    <!-- @click语法糖 === v-on:click -->
    <button v-on:click='add'>+</button>
    <button @click='sub'>-</button>
    <!-- <button @click='counter--'>-</button> -->

    <button @click='counter=0'>reset</button>
  </div>

  <script src="../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        counter: 0,
      },
      methods: { //v-on 所有事件(拖拽、点击、长按等等)
        add: function () {
          this.counter++;
          console.log('add 被执行')
        },
        sub: function () {
          this.counter--;
          console.log('sub 被执行')
        }
      },
      //生命周期
      beforeCreate: function () {
        //0
        console.log('beforeCreate')
      },
      create: function () {
        console.log('create')
      },
      beforeMount: function () {
        //1
        console.log('beforeMount')
      },
      mounted: function () {
        //3
        console.log('mounted')
      },
      beforeDestroy: function () {
        console.log('beforeDestroy')
      }
    })
  </script>
</body>

</html>